<template>
  <div class="buy-list">
    <div class="item" v-for="(item,index) in foodlist" :key="index" @click="detailClick(item)">
      <div class="content">
        <img :src="item.img" alt="">
        <div class="name">{{item.name}}</div>
        <div class="ename">{{item.ename}}</div>
        <span class="star">
          <van-rate
            :value="item.star"
            :size="16"
            allow-half
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            />
        </span>
        <span class="price">￥{{item.price}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      foodlist: [
        { 
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=2019274386,4258861180&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:3.5
        },
        {
          name:'水饺',
          ename:'boiled dumplings',
          img:'https://img1.baidu.com/it/u=3517211753,261067421&fm=26&fmt=auto&gp=0.jpg',
          price:14.00,
          star:1
        },
        {
          name:'馄饨',
          ename:'dumpling soup',
          img:'https://img1.baidu.com/it/u=4195188679,848965894&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:4
        },
        {
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=3793600010,2391057821&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:5
        },
        {
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=2040059723,3248891699&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:4
        },
        {
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=3793600010,2391057821&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:4
        },
        {
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=3793600010,2391057821&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:4
        },

      ]
    }
  },
  methods: {
    detailClick(item) {
      this.$router.push({
        path: "/detail",
        query: {
          item: JSON.stringify(item),
        },
      });
    }
  }
}
</script>

<style scoped lang="scss">
.buy-list {
  column-count: 2;
  column-gap: 0;
  padding: 1rem 0.5rem;
  .item {
    box-sizing: border-box;
    break-inside: avoid;
    padding: 0px 0.2rem;
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: auto;
      box-sizing: border-box;
      img {
        margin:0px auto;
        width: 100%;
        border-radius: 0.5rem;
      }
      .name {
        padding-top:0.5rem;
        padding-left: 0.5rem;
        font-size: 1.2rem;
      }
      .ename {
        padding-top:0.5rem;
        padding-left: 0.5rem;
        font-size: 0.5rem;
        display: inline-block;
        white-space: nowrap;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .star {
        padding-top:0.5rem;
        padding-left: 0.5rem;
      }
      .price {
        position: relative;
        bottom: 1.7rem;
        left: 8rem;
        font-size: 1.3rem;
      }
    }
  }
}
</style>
